<template>
  <view :class="classNameList">
    <template v-if="type === 'detail'">
      <view class="_banner is-skeleton" />
      <view class="_info">
        <view class="_price flex">
          <view class="_bar _thick _w60 is-skeleton" />
        </view>
        <view class="flex">
          <view class="flex1">
            <view class="_bar _th30 is-skeleton" />
            <view class="_bar _thin _w90 is-skeleton _top16" />
          </view>
          <view class="_share is-skeleton"></view>
        </view>
      </view>
      <view class="_bar _th88 is-skeleton _top16 _collage-linear" />
      <view class="_bar _th88 _collage flex center white">
        <view class="_avatar is-skeleton"></view>
        <view class="_bar _thick _w40 flex1 is-skeleton" />
        <view class="_bar _thick _w20 is-skeleton mg-lf" style="border-radius: 100px" />
      </view>
      <view class="_bar _th88 _collage flex center white">
        <view class="_avatar is-skeleton"></view>
        <view class="_bar _thick _w40 flex1 is-skeleton" />
        <view class="_bar _thick _w20 is-skeleton mg-lf" style="border-radius: 100px" />
      </view>
      <view class="_bar _th88 flex center white _top16">
        <view class="_bar _th30 is-skeleton _w60px rt150 lf24"></view>
        <view class="flex flex1 .space-around">
          <view class="_bar _th30 is-skeleton _w20"></view>
          <view class="_bar _th30 is-skeleton _w20"></view>
          <view class="_bar _th30 is-skeleton _w20"></view>
        </view>
      </view>
    </template>
    <template v-else-if="type === 'home'">
      <view class="home_container">
        <view class="flex">
          <view class="_search white"></view>
          <view class="_search-btn white lf24"></view>
        </view>
        <view class="_bar _th34 _w60 white auto _top24"></view>
        <view class="_bar _th34 _w40 white auto _top24"></view>
        <view class="discount">
          <view class="_time-coupon">
            <view class="_title">
              <view class="_bar is-skeleton _th28 _w140px"></view>
            </view>
            <view style="display: flex;align-items: center">
              <text class="_bar is-skeleton _th28 _w140px"></text>
            </view>
          </view>
          <view class="coupon-list">
            <view class="m-coupon-list">
              <scroll-view class="_scroll-view" scroll-x="true" scroll-left="0">
                <view class="_coupon is-skeleton">
                  <view class="_dl">
                    <view class="_dt">
                      <view class="_amount"><text>￥</text>10</view>
                      <view class="_desc">满100可用</view>
                    </view>
                    <view class="_dd">
                      <view class="_text">去使用</view>
                    </view>
                  </view>
                </view>
                <view class="_coupon is-skeleton">
                  <view class="_dl">
                    <view class="_dt">
                      <view class="_amount"><text>￥</text>10</view>
                      <view class="_desc">满100可用</view>
                    </view>
                    <view class="_dd">
                      <view class="_text">去使用</view>
                    </view>
                  </view>
                </view>
                <view class="_coupon is-skeleton">
                  <view class="_dl">
                    <view class="_dt">
                      <view class="_amount"><text class="_text">¥</text>10</view>
                      <view class="_desc">满100可用</view>
                    </view>
                    <view class="_dd">
                      <view class="_text">去使用</view>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
          <view class="_title"></view>
          <view class="_bar is-skeleton _th28 _w280px"></view>
          <view class="goods-list">
            <scroll-view class="p-goods-list" scroll-x="true" scroll-left="0">
              <view class="_goods-detail is-skeleton">
                <view class="_goods-img is-skeleton"></view>
                <view class="_goods-price"></view>
              </view>
              <view class="_goods-detail is-skeleton">
                <view class="_goods-img is-skeleton"></view>
                <view class="_goods-price"></view>
              </view>
              <view class="_goods-detail is-skeleton">
                <view class="_goods-img is-skeleton"></view>
                <view class="_goods-price"></view>
              </view>
              <view class="_goods-detail is-skeleton">
                <view class="_goods-img is-skeleton"></view>
                <view class="_goods-price"></view>
              </view>
            </scroll-view>
          </view>
        </view>
        <!--中间3个活动图-->
        <view class="activity">
          <view class="_lf-img white">
            <view class="_bar _th30 is-skeleton _w180px"></view>
            <view class="_bar _th30 is-skeleton _w210 _top16"></view>
            <view class="_bar _th160 is-skeleton _w240px _top68"></view>
          </view>
          <view class="_rt">
            <view class="_rt-img white">
              <view class="flex flex-start">
                <view class="flex1">
                  <view class="_bar _thin _w90 is-skeleton" />
                  <view class="_bar _th30 is-skeleton _top16" />
                </view>
                <view class="_share is-skeleton"></view>
              </view>
            </view>
            <view class="_rt-img white">
              <view class="flex flex-start">
                <view class="flex1">
                  <view class="_bar _thin _w90 is-skeleton" />
                  <view class="_bar _th30 is-skeleton _top16" />
                </view>
                <view class="_share is-skeleton"></view>
              </view>
            </view>
          </view>
        </view>
        <view class="subsidy">
          <view class="_time-coupon">
            <view class="_title">
              <view class="_bar is-skeleton _th28 _w140px"></view>
            </view>
            <view style="display: flex;align-items: center">
              <view class="_bar is-skeleton _th28 _w140px"></view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
export default {
  name: 'XSkeleton',
  components: {},
  props: {
    type: {
      type: String,
      default: 'home'
    },
    top: {
      type: Number,
      default: 0
    },
    length: {
      type: Number,
      default: 6
    }
  },
  data() {
    return {};
  },
  computed: {
    classNameList() {
      return ['x-skeleton', `is-${this.type}`].join(' ');
    }
  },
  watch: {},
  created() {

  },
  methods: {}
};
</script>

<style lang="scss">
  .x-skeleton {
    z-index: 1999; position: fixed; top: 0; width: 100%; height: 100vh; background-color: #F7F8FA; visibility: visible; opacity: 1; transition: visibility .4s, opacity .4s;
    &.is-list{
      background-color: #fafafa;
      ._ul{
        display: flex; flex-wrap: wrap; padding: 10px;
        ._li{ width: 50%; padding: 10px;}
        ._item{ overflow: hidden; border-radius: 10px;}
        ._pic{ height: 345px;}
        ._info{ background-color: #fff;}
        ._price{
          margin: 40px 0 0; display: flex; align-items: center;
          .flex-item{ flex: 1;}
        }
      }
    }

    ._info { padding: 30px 24px; background: #FFFFFF}
    ._details { padding: 30px 16px; border-top: 16px solid #FAFAFA; }
    ._price { margin-bottom: 28px; }
    ._n-price { width: 87px; height: 40px; margin-right: 30px; }
    ._o-price { width: 64px; height: 30px; }
    ._btn { margin: 36px 0 0; height: 84px; border-radius: 8px; }
    ._bar {
      width: 100%;
      //+ ._bar { margin-top: 24px; }
      &._th160 { height: 160px; }
      &._th88 { height: 88px; }
      &._thick { height: 44px; }
      &._th34 { height: 34px; }
      &._th30 { height: 30px; }
      &._th28 { height: 28px; }
      &._thin { height: 24px; }
      &._w90 { width: 90%; }
      &._w80 { width: 80%; }
      &._w60 { width: 60%; }
      &._w40 { width: 40%; }
      &._w20 { width: 20%; }
      &._w60px { width: 60px; }
      &._w140px { width: 140px; }
      &._w180px { width: 180px; }
      &._w210px { width: 210px; }
      &._w240px { width: 240px; }
      &._w280px { width: 280px; }
    }
    .auto { margin: 0 auto}
    ._top16{ margin-top: 16px; }
    ._top24{ margin-top: 24px; }
    ._top68{ margin-top: 68px; }
    .mg-lf{ margin-left: 120px; }
    .lf24{ margin-left: 24px; }
    .rt150{ margin-right: 150px; }
    ._avatar { width: 56px;height: 56px;border-radius: 50%;margin-right: 12px}
    ._collage-linear{
      background: linear-gradient(90deg, #F5F5F5 0%, rgba(254, 254, 254, 0) 99.13%) !important;
    }
    ._collage{ padding: 16px 24px; margin-bottom: 1px;
    }
    ._share{ height: 74px; width: 64px; margin-left: 30px;
    }
    ._banner {
      //width: 100%; height: 100vw;
      width: 100%; height: 690px;
    }
    .is-skeleton { background: #f5f5f5;}
    .home_container{
      padding: 24px;
      ._search{ width: 600px; height: 64px; border-radius: 64px;
      }
      ._search-btn{ width: 64px; height: 64px; border-radius: 64px; }
      .discount{
        width: 702px;
        height: 522px;
        margin: 26px auto;
        margin-bottom: 16px;
        background: linear-gradient(0deg, #FFFFFF, #FFFFFF);
        border-radius: 10px;
        padding: 20px 0 20px 16px;
        ._time-coupon{
          padding: 0px 30px 16px 0px;
          display: flex;
          ._title{
            flex: 1;
            font-size: 28px;
            font-weight: bold;
            color: $uni-color-default;
          }
        }
        .coupon-list{
          margin-bottom: 16px;
          .m-coupon-list{
            overflow: auto; -webkit-overflow-scrolling: touch;white-space: nowrap;
            ._scroll-view{
              white-space: nowrap;
              width: 100%;
            }
            ._coupon{
              display: inline-block;width: 240px;background: #F5F5F5;border-radius:10px;margin-right:16px;
              ._dl{ min-height: 100px; display: flex; align-items: center; color: $uni-color-primary; line-height: 1;}
              ._dt{
                flex: 1; padding: 12px 15px;position: relative;border-right: 2px dashed rgba(255, 255, 255, 0.5);
                ._amount{
                  visibility: hidden;
                  font-size: 36px; font-weight: bold;
                  ._text{ font-size: 24px;}
                }
                ._desc{ visibility: hidden; font-size: 24px; padding: 10px 0 14px 0;}
              }
              ._dt:after{
                position:absolute;
                content:'';
                width:12px;
                height:12px;
                background-color: #ffffff;
                border-radius: 50px;
                right:-6px;
                top:0;
                z-index:1;
              }
              ._dd{
                width: 160px; height: 100%; position: relative;
                ._text{
                  visibility: hidden; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0);  font-size: 24px; font-weight: bold; white-space: nowrap; width: 100%; text-align: center;
                  ._text{ display: block; padding: 5px 0;}
                }
              }
              ._dt:before{
                position:absolute;
                content:'';
                width:12px;
                height:12px;
                background-color: #ffffff;
                border-radius: 50px;
                right:-6px;
                bottom:0;
                z-index:1;
              }
            }
            ._coupon:last-child{
              margin-right: 0;
            }
          }
        }

        .goods-list{
          margin-top: 16px;
          .p-goods-list{
            white-space: nowrap;
            width: 100%;
          }
          ._goods-detail{
            display: inline-block;
            box-sizing: border-box;
            width: 180px;
            min-height: 246px;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 16px;
            ._goods-img{
              width: 100%;
              height: 180px;
            }
            ._goods-price{
              height: 65px;
              line-height: 65px;
              text-align: center;
              background: #F0F0F0
            }
          }
          ._goods-detail:last-child{
            margin-right: 0;
          }
        }
      }
      .activity{
        display: flex;
        ._lf-img{
          width: 300px;
          height: 360px;
          border-radius: 10px;
          overflow: hidden;
          padding: 30px;
        }
        ._rt{
          flex: 1;
          flex-direction: column;
          margin-left: 16px;
          ._rt-img{
            height: 172px;
            margin-top: 16px;
            border-radius: 10px;
            overflow: hidden;
            padding: 24px;
            ._share{
              width: 98px;
              height: 124px;
            }
          }
          ._rt-img:first-child{
            margin-top: 0;
          }
        }
      }
      .subsidy{
        width: 702px;
        height: 390px;
        margin: 26px auto;
        margin-bottom: 16px;
        background: #FFFFFF;
        border-radius: 10px;
        padding: 20px 0 20px 16px;
        ._time-coupon{
          padding: 0px 30px 16px 0px;
          display: flex;
          ._title{
            flex: 1;
          }
        }
      }
    }
    .white { background: #FFFFFF }
    .flex{ display: flex; }
    .flex1{ flex: 1; }
    .flex-direction{ flex-direction: column; }
    .flex-start{align-items: flex-start;}
    .center{ align-items: center; }
    .space-around{ justify-content: space-around; }
  }
</style>
